<div id="header" class="detail">
    <div class="header-bg"></div>
    <!--    <a href="/"><img class="logo" src="/assets/public/images/canvas/logo.png"/></a>-->
    <span class="right-detail-header fr" data-id="#(data.id)"
          data-url="#(data.url)" data-download="#(data.download)">
        
        <a class="download-link close-icon" href="javascript:window.close();">
            <img width="20" src="/assets/public/images/canvas/close_fixed.png"/>
        </a>
        <a class="download-link" onclick="IMAGE_OPERATE.download(this)" data-download="#(data.download)">
            <img src="/assets/public/images/recommend/xiazai.svg"/>
        </a>
        
        <a class="collection-link animated" image-id="#(data.id)">
                <img class="collection-icon-active" src="/assets/public/images/recommend/like-p.svg"/>
                <img class="collection-icon" src="/assets/public/images/recommend/like.svg"
                     onclick="IMAGE_OPERATE.like(this)"/>
            </a>
        
        <a class="download-link" id="jubao-btn-right">
            <img src="/assets/public/images/recommend/jubao.svg"/>
            <div class="jubao-dialog">
                <div class="jubao-title">为什么举报这个图片？</div>
                <div class="jubao-content">
                    <ul>
                        <li class="active">
                            <div>
                                <img class="radio" src="/assets/public/images/recommend/radio.svg"/>
                                <img class="radio-active" src="/assets/public/images/recommend/radio_active.svg"/>
                                <span>涉黄涉暴违法信息</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <img class="radio" src="/assets/public/images/recommend/radio.svg"/>
                                <img class="radio-active" src="/assets/public/images/recommend/radio_active.svg"/>
                                <span>垃圾广告信息</span>
                            </div>
                        </li>
                        <li>
                            <div>
                                <img class="radio" src="/assets/public/images/recommend/radio.svg"/>
                                <img class="radio-active" src="/assets/public/images/recommend/radio_active.svg"/>
                                <span>侵权</span>
                            </div>
                            <div class="jubao-textarea-wrapper">
                                <textarea class="form-control jubao-textarea" rows="3"
                                          placeholder="请留下线索如该侵权内容的原创来源链接"></textarea>
                            </div>
                        </li>
                    </ul>
                    <div class="jubao-btn">
                        <span class="cancel-btn">取消</span>
                        <span class="meiye-btn">提交</span>
                    </div>
                </div>
            </div>
        </a>
    </span>

    <!-- Modal -->
    <div class="modal fade" id="click-collection-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="width: 282px;margin-top: 189px;">
            <div class="modal-content">
                <div class="modal-body">
                    <h4 class="modal-body-title" id="myModalLabel">选择保存的文件夹</h4>
                    <img class="modal-body-close" data-dismiss="modal" src="/assets/public/images/canvas/close.png"/>
                    <div class="modal-body-container">
                        <ul>
                            <li class="active" folder-id="0">默认文件夹</li>
                        </ul>
                    </div>
                    <div class="modal-body-btn" id="save-collection-nav">保存</div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/assets/public/js/common/header_2.js"></script>


<div id="detail-conntainer" style="position:relative;margin: 24px auto 0px; text-align: center;">

    <img style="width:#(data.width/2)px;" src="#(data.url)"/>

</div>


<script src="/assets/public/js/masonry.pkgd.min.js"></script>
<script src="/assets/public/js/lazyload.js"></script>
<script src="/assets/public/js/scroll.js"></script>
<script src="/assets/public/js/canvas.js"></script>
<script>
    $(function () {
        var Search = {
            getQuery: function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            },
            init: function () {
                this.initMasonry();
                setTimeout(function () {
                    Search.initMasonry();
                }, 600);
                this.initLazyLoad();
                this.masonryWidth();
                this.initEvent();
                this.initLoadingMoreCanvas();
            },
            initMasonry: function () {
                $('#image-list').masonry({
                    itemSelector: '.box',
                    gutter: 32,
                    isAnimated: true,
                    percentPosition: true
                });
            },
            initLazyLoad: function () {
                $("img.lazyload").lazyload({
                    effect: "show",
                    load: Search.initMasonry,
                    threshold: 200,
                    effect_params: 'fast'
                });
            },
            masonryWidth: function () {
                var $browser = document.body.clientWidth - 190;
                var $boxWidth = 236;         // 盒子宽度
                var $boxSpacing = 32;      //盒子与盒子之间的间距
                if ($browser <= 472) {
                    $("#image-list").css('width', 236);
                    $("#body-container, #detail-conntainer").css('width', 236);
                    $(".loading-more").css('width', 236);
                } else {
                    $num = ($browser - $boxWidth) / ($boxWidth + $boxSpacing);
                    $n = parseInt($num);
                    $masonryWidth = $n * ($boxWidth + $boxSpacing) + $boxWidth;
                    $("#image-list").css('width', $masonryWidth);
                    $("#body-container,#detail-conntainer").css('width', $masonryWidth);
                    $(".loading-more").css('width', $masonryWidth);
                }
            },
            initEvent: function () {
                // 浏览器窗口变动
                window.onresize = Search.masonryWidth;
                $('.collection-link').on('click', function () {
                    var imageId = $(this).attr('image-id');
                    if ($(this).hasClass('animated')) {
                        $(window).trigger('add-collection', {
                            imageId: imageId,
                            _this: this
                        });
                    } else {
                        $(window).trigger('delete-collection', {
                            imageId: imageId,
                            _this: this
                        });
                    }
                });
            },
            initLoadingMoreCanvas: function () {
                var loading = false;
                var self = this;
                var pn = self.getQuery('pn') || 1;
                $(window).scroll(function () {
                    var scrollTop = $(window).scrollTop();
                    var height = $('#image-list').height();
                    var windowHeight = $(window).height();
                    if (scrollTop >= height - windowHeight + 100) {
                        if (!loading) {
                            loading = true;
                            $('.loading-more').css('opacity', 1);
                            pn++;
                            var total = 61;
                            var totalPage = Math.ceil(total / 50);
                            if (pn > totalPage) {
                                $('.loading-more').addClass('success');
                                return;
                            }
                            $.ajax({
                                type: "GET",
                                url: "/web/recommend",
                                data: {
                                    pn: pn,
                                    id: self.getQuery('id')
                                },
                                dataType: 'json',
                                success: function (result) {
                                    if (result.errno === 0) {
                                        var list = result.content.data;
                                        nunjucks.configure('/public/view/home', {autoescape: true});
                                        var str = nunjucks.render('list.html', {list: list});
                                        str = $(str);
                                        $('#image-list').append(str);
                                        $('#image-list').masonry('appended', str, true);
                                        Search.initLazyLoad();
                                    }
                                    loading = false;
                                },
                                error: function (e) {
                                    console.log(e.status);
                                    console.log(e.responseText);
                                }
                            });
                        }
                    }
                });
            }
        };

        Search.init();


        $(function () {
            $("#detail-conntainer img").click(function () {
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
            });
            $(".fangda").click(function () {
                var _this = $("#detail-conntainer img");//将当前的pimg元素作为_this传入函数
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
            });
            $('.jubao-content li').on('click', function () {
                $(this).addClass('active').siblings().removeClass('active');
            });
            $('#jubao-btn-right').click(function () {
                if ($('.jubao-dialog').is(":visible")) {
                    $('.jubao-dialog').fadeOut();
                } else {
                    $('.jubao-dialog').fadeIn();
                }
            });
            $('.jubao-content').click(function (e) {
                e.stopPropagation();
            })
            $('.jubao-content .meiye-btn').on('click', function () {
                // 获取是数据
                let params = {
                    image_id: 11666,
                    name: $('.jubao-content ul li.active div span').html(),
                    desc: $('.jubao-content textarea').val()
                }
                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: '/web/feedback',
                    data: params,
                    success: function (res) {
                        spop({
                            template: '举报成功',
                            style: 'success',
                            autoclose: 2000,
                            position: 'top-center'
                        });
                        $('.jubao-dialog').fadeOut();
                    },
                    error: function (e) {
                        spop({
                            template: e.message,
                            style: 'warning',
                            autoclose: 2000,
                            position: 'top-center'
                        });
                    }
                });

            });
            $('.jubao-content .cancel-btn').on('click', function () {
                // 获取是数据
                $('.jubao-dialog').fadeOut();
            });
        });

        function imgShow(outerdiv, innerdiv, bigimg, _this) {
            var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
            $(bigimg).attr("src", src);//设置#bigimg元素的src属性
            $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
            $('body').addClass('overflow');
            $('#innerdiv').click(function (e) {

                e.stopPropagation();
            })
            $(outerdiv).click(function () {//再次点击淡出消失弹出层
                $(this).fadeOut("fast");
                $('body').removeClass('overflow');
            });
            $('.close-icon').click(function () {//再次点击淡出消失弹出层
                $(outerdiv).fadeOut("fast");
                $('body').removeClass('overflow');
            });
        }

    })
</script>


<script>
    // 下载和点赞
    const IMAGE_OPERATE = {
        like: function (dom) {
            let date = $(dom).parent().parent().data();
            $.get("/image/like/" + date.id, function (res) {
                // $('.collection-icon').hide()
                // $('.collection-icon-active').show()
                console.log({res});
            });
        },
        download: function (dom) {
            let date = $(dom).parent().data();
            $.get("/image/download/" + date.id, function (res) {
                console.log({res});
            });
            window.open(date.url + "?attname=xy.png")
        }
    }

</script>